<template>
  <el-dialog
    v-model="dialogVisible"
    title="用户信息编辑"
    width="32%"
    :with-credentials="true"
  >
    <div>
      <el-form
        :model="form"
        :inline="true"
        label-width="100px"
        class="customClass"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item label="用户名" prop="petName">
          <el-input v-model="form.nickName" disabled style="width: 250px" />
        </el-form-item>
        <el-form-item label="角色权限设置">
          <el-radio-group v-model="form.userType" style="width: 350px">
            <el-radio label="0">社区业主</el-radio>
            <el-radio label="1">社区管理员</el-radio>
            <el-radio label="2">系统管理员</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="账户状态">
          <el-radio-group v-model="form.status">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">封禁</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="创建时间" prop="petName">
          <el-input v-model="form.createTime" disabled style="width: 250px" />
        </el-form-item>
        <el-form-item label="更新时间" prop="petName">
          <el-input v-model="form.updateTime" disabled style="width: 250px" />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm(formRef)">
          确定
        </el-button>
        <el-button @click="resetForm(formRef)">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { updateUserInfo, addUserSendEmailContent } from "@/api/user";
import type { FormInstance, FormRules } from "element-plus";

import { ElMessage } from "element-plus";

interface RuleForm {
  nickName: string;
  userType: string;
  status: string;
  createTime: string;
  updateTime: string;
  userId: string;
}
const formRef = ref<FormInstance>();
const form = reactive<RuleForm>({
  nickName: "",
  userType: "",
  status: "",
  createTime: "",
  updateTime: "",
  userId: "",
});
// const vaccineImage = ref<any>();
const rules = reactive<FormRules<RuleForm>>({
  userType: [
    {
      required: true,
      message: "请选择宠物的性别",
      trigger: "change",
    },
  ],
  status: [
    {
      required: true,
      message: "请选择宠物的性别",
      trigger: "change",
    },
  ],
});
const dialogVisible = ref(false);

const showDialog = (data: any) => {
  dialogVisible.value = true;
  form.nickName = data.nickName;
  form.userType = data.userType;
  form.status = data.status;
  form.createTime = data.createTime;
  form.updateTime = data.updateTime;
  form.userId = data.id;
};

const emits = defineEmits(["getTableData"]);
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      dialogVisible.value = false;
      await updateUserInfo({
        userType: form.userType,
        userId: form.userId,
        status: form.status,
      }).then((res: any) => {
        emits("getTableData");
        ElMessage({
          message: res.message,
          type: "success",
        });
      });
      var name = "";
      if (form.userType === "0") {
        name = "社区业主";
      } else if (form.userType === "1") {
        name = "社区管理员";
      } else {
        name = "系统管理员";
      }
      await addUserSendEmailContent({
        receiveUserId: form.userId,
        content: `您好,你的角色已经变更为${name}`,
        messageType: 0,
      });
    }
  });
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  dialogVisible.value = false;
  formEl.resetFields();
};

defineExpose({
  showDialog,
});
</script>
<style scoped lang="less">
.dialog-footer .el-button {
  margin-right: 10px;
  margin-top: -20px;
}
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: center;
}
.customClass {
  .el-form-item {
    margin-bottom: 30px;
  }
  width: 80%;
}
</style>
